<template>
  <div class="job-history">
    <div class="page-header">
      <h2 class="page-title">历史职位</h2>

      <!-- 状态筛选 -->
      <div class="filter-section">
        <span class="filter-label">状态筛选：</span>
        <el-select
          v-model="statusFilter"
          placeholder="请选择状态"
          @change="handleStatusChange"
          style="width: 150px"
        >
          <el-option label="全部" :value="null" />
          <el-option label="招募中" :value="1" />
          <el-option label="已关闭" :value="2" />
          <el-option label="违规删除" :value="3" />
        </el-select>
      </div>
    </div>

    <!-- 岗位列表 -->
    <div class="jobs-table">
      <el-table :data="jobs" style="width: 100%" v-loading="loading">
        <el-table-column prop="jobName" label="岗位名称" />
        <el-table-column prop="expYears" label="经验要求" />
        <el-table-column prop="edu" label="学历要求" />
        <el-table-column prop="city" label="工作地点" />
        <el-table-column label="薪资范围">
          <template #default="scope">
            <span class="salary">{{ formatSalary(scope.row) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="100">
          <template #default="scope">
            <el-tag :type="getJobStatusType(scope.row.status)">
              {{ getJobStatusText(scope.row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120" fixed="right">
          <template #default="scope">
            <el-button size="small" @click="viewJob(scope.row)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          v-model:current-page="pagination.pageNo"
          v-model:page-size="pagination.pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="pagination.total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { getCompanyJobList } from "@/api/company.js";

const loading = ref(false);
const statusFilter = ref(null); // 状态筛选

// 分页配置
const pagination = ref({
  pageNo: 1,
  pageNum: 10, // 后端接口使用的参数
  pageSize: 10, // Element Plus 分页组件使用的参数
  total: 0,
});

// 岗位列表数据
const jobs = ref([]);

// 获取岗位列表
const getJobList = async () => {
  loading.value = true;
  try {
    const params = {
      pageNo: pagination.value.pageNo,
      pageNum: pagination.value.pageNum,
      status: statusFilter.value,
    };

    const response = await getCompanyJobList(params);
    jobs.value = response.list;
    pagination.value.total = response.totals;
  } catch (error) {
    console.error("获取岗位列表失败:", error);
    ElMessage.error("获取岗位列表失败");
    jobs.value = [];
    pagination.value.total = 0;
  } finally {
    loading.value = false;
  }
};

// 格式化薪资显示
const formatSalary = (job) => {
  if (job.beginSalary && job.endSalary && job.monthlySalary) {
    return `${job.beginSalary}k-${job.endSalary}k·${job.monthlySalary}薪`;
  }
  return "面议";
};

// 获取岗位状态类型
const getJobStatusType = (status) => {
  const statusMap = {
    1: "success", // 招募中
    2: "info", // 已关闭
    3: "danger", // 违规删除
  };
  return statusMap[status] || "info";
};

// 获取岗位状态文本
const getJobStatusText = (status) => {
  const statusMap = {
    1: "招募中",
    2: "已关闭",
    3: "违规删除",
  };
  return statusMap[status] || "未知";
};

// 查看岗位
const viewJob = (job) => {
  console.log("查看岗位:", job);
  ElMessage.info("查看功能待实现");
};

// 编辑岗位（保留之前的代码，但不实现）
const editJob = (job) => {
  ElMessage.info("编辑功能待实现");
};

// 删除岗位（保留之前的代码，但不实现）
const deleteJob = async (job) => {
  ElMessage.info("删除功能待实现");
};

// 状态筛选变化
const handleStatusChange = () => {
  pagination.value.pageNo = 1; // 重置到第一页
  getJobList();
};

// 处理分页大小变化
const handleSizeChange = (size) => {
  pagination.value.pageSize = size; // 更新 Element Plus 组件使用的属性
  pagination.value.pageNum = size; // 更新后端接口使用的参数
  pagination.value.pageNo = 1;
  getJobList();
};

// 处理当前页变化
const handleCurrentChange = (page) => {
  pagination.value.pageNo = page;
  getJobList();
};

onMounted(() => {
  console.log("组件加载完成，初始分页数据:", pagination.value);
  getJobList();
});
</script>

<style scoped>
.job-history {
  padding: 2rem;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  padding: 0 1.5rem;
}

.page-title {
  font-size: 1.6rem;
  font-weight: 500;
  color: #2d3748;
  margin: 0;
}

.filter-section {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.filter-label {
  font-size: 14px;
  color: #666;
  white-space: nowrap;
}

.jobs-table {
  background: white;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  border: 1px solid #e2e8f0;
  overflow: hidden;
}

.salary {
  font-weight: 600;
  color: #dc3545;
}

.pagination-container {
  padding: 1rem;
  display: flex;
  justify-content: center;
  background: white;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
}
</style>
